<template>
  <div class="showLogistics">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="查看物流"
      left-text
      left-arrow
      @click-left="onClickLeft"
      class="header"
    >
      <van-icon name="service" slot="right" @click="serverBtn" />
    </van-nav-bar>

    <div class="section">
      <div
        class="nav_btn_content_item"
        v-for="(item, index) in logistics"
        :key="index"
      >
        <div class="item_top">
          <h3 class="item_top_center">
            {{ item.Courier }}: {{ item.courierCode }}
          </h3>
          <span class="item_top_right">
            {{ item.state }}
          </span>
        </div>
        <div class="item_middle">
          <h1 class="item_middle_title">{{ item.parcelState }}</h1>
          <p class="item_middle_time">{{ item.takeTime }}</p>
        </div>
        <div class="item_info">
          <span class="fuck_off_info"
            >{{ item.autoTaking }}后将自动确认收货</span
          >
        </div>
        <div class="item_bottom">
          <div class="item_bottom_left">
            <i class="item_bottom_left_states">共{{ item.totalCount }}件宝贝</i>
          </div>
          <van-button
            class="item_bottom_right"
            type="default"
            @click="
              $router.push({ path: '/orderDetails', query: { stateCode: 0 } })
            "
            >确认收货</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      // 待收货
      logistics: [
        {
          Courier: "顺丰",
          courierCode: "12163761743514",
          state: "待收货",
          totalCount: "1",
          parcelState: "快件在【深圳集散中心】已装车准备发往..",
          takeTime: "2019-08-23  09:38:57",
          autoTaking: "6天6小时51分"
        },
        {
          Courier: "顺丰",
          courierCode: "12163761743514",
          state: "待收货",
          totalCount: "1",
          parcelState: "快件在【深圳集散中心】已装车准备发往..",
          takeTime: "2019-08-23  09:38:57",
          autoTaking: "6天6小时51分"
        }
      ]
    };
  },
  created() {},
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
    serverBtn() {
      console.log("按钮");
    }
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.showLogistics {
  .header {
    width: 100%;
    height: 100px;
    @{deep} .van-icon {
      font-size: 19px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    @{deep} .van-nav-bar__title {
      line-height: 50px;
      font-size: 18px;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
  }
  .section {
    width: 100%;
    padding: 30px;
    .nav_btn_content_item {
      width: 690px;
      margin-top: 30px;
      background: rgba(255, 255, 255, 1);
      border-radius: 9px;
      padding: 30px;
      .item_top {
        width: 100%;
        height: 66px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        border-bottom: 2px dotted rgba(226, 226, 226, 1);
        .item_top_center {
          float: left;
          font-size: 30px;
          line-height: 42px;
          color: rgba(51, 51, 51, 1);
        }
        .item_top_right {
          float: right;
          font-size: 26px;
          line-height: 42px;
          color: #ff7f3f;
        }
      }
      .item_middle {
        width: 100%;
        border-bottom: 2px dotted rgba(226, 226, 226, 1);
        padding: 35px 0;
        .item_middle_title {
          font-size: 28px;
          font-family: SourceHanSansCN;
          font-weight: 600;
          color: rgba(51, 51, 51, 1);
        }
        .item_middle_time {
          margin-top: 20px;
          font-size: 24px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
        }
      }
      .item_info {
        width: 690px;
        height: 78px;
        line-height: 78px;
        margin-left: -30px;
        background: rgba(255, 59, 62, 0.08);
        padding-left: 30px;
        .fuck_off_info {
          font-size: 24px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(255, 59, 62, 1);
        }
      }
      .item_bottom {
        height: 98px;
        .item_bottom_left {
          line-height: 98px;
          float: left;
          font-size: 34px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: rgba(51, 51, 51, 1);
          .item_bottom_left_states {
            font-size: 26px;
            font-family: SourceHanSansCN;
            font-weight: 400;
          }
        }
        .item_bottom_right {
          float: right;
          padding: 0;
          width: 150px;
          height: 58px;
          line-height: 58px;
          border: 2px solid rgba(51, 51, 51, 1);
          border-radius: 29px;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
